<template>
  <div>
    <el-form ref="form" :model="userInfo" label-width="80px" style="width: 500px;text-align: left">
<!--      <el-form-item label="用户">-->
<!--        <el-input v-model="userInfo.id"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="用户名:">
        <label>{{userInfo.username}}</label>
      </el-form-item>

      <el-form-item label="昵称:">
        <el-input v-model="userInfo.nickname"></el-input>
      </el-form-item>

      <el-form-item label="头像:">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8082/file/open/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="userInfo.profilePictureUrl" :src="userInfo.profilePictureUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="更新时间:">
        <label>{{userInfo.updateTime}}</label>
      </el-form-item>

      <el-form-item label="创建时间:">
        <label>{{userInfo.createTime}}</label>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="updateUserInfo">更新</el-button>
        <el-button type="danger" @click="exit">退出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: "UserInfoEdit",
  data() {
    return {
      userInfo: {
        id: '',
        username:'',
        nickname:'',
        profilePictureUrl:'',
        createTime:'',
        updateTime:'',
      },
    }
  },

  created() {
    this.init()
    this.getUserInfo()
  },
  methods: {
    init(){
      this.userInfo={}
    },
    getUserInfo(){
      this.$get("/user/getById").then(res=>{
        this.userInfo = res.data;
      })
    },
    updateUserInfo() {
      this.$post("/user/updateUserInfo",this.userInfo).then(()=>{
        this.$message.success("更新成功")
        this.getUserInfo()
      })
    },
    handleAvatarSuccess(res) {
      if(res.code ===0){
        this.userInfo.profilePictureUrl =res.data
        this.$forceUpdate()
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    exit(){
      Cookies.remove("token")
      this.$router.push("/login")
    }

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px!important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>